<template>
	<view class="modal-confirm">
		<u-modal :show="show" :title="content" negativeTop="100rpx" :closeOnClickOverlay="closeOnClickOverlay" @close="show = false">
			<template #confirmButton>
				<view class="flex-between">
					<u-button :text="cancelText" shape="circle" @click="cancel" color="#F3F3F3" customStyle="color: #999;"></u-button>
					<u-button :text="confirmText" shape="circle" @click="confirm" color="linear-gradient(0deg, #528EFF, #2F75FA)"></u-button>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		confirmText: {
			type: String,
			default: '确认'
		},
		content: {
			type: String,
			default: ''
		},
		closeOnClickOverlay: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		show: {
			get() {
				return this.value;
			},
			set(val) {
				this.$emit('input', val);
			}
		}
	},
	methods: {
		confirm() {
			this.$emit('confirm');
			this.show = false;
		},
		cancel() {
			this.$emit('cancel');
			this.show = false;
		}
	}
}
</script>
